<template>
  <view>
    <view class="u-p-24">
      <view class="card gap-24" v-for="i in 2" :key="i">
        <view class="flex-row align-center">
          <u-avatar src="https://picsum.photos/id/912/200/200" size="110" mode="square"></u-avatar>
          <image class="u-m-l-12 u-m-r-12" src="../../static/icons/quhao-fenge.png" style="width: 12rpx;height: 120rpx;"
            mode="aspectFill"></image>
          <view class="flex-col" style="width: 500rpx;height: 120rpx;margin-left: auto;">
            <view class="u-font-28 u-line-1">仟吉KenGee(宝龙店)</view>
            <view class="u-font-24 u-line-2" style="color: #C4C4C4;margin: auto 0;">地址金水区商务内环九如路海逸名门23号楼1单元101</view>
          </view>
        </view>

        <view class="items u-p-t-24">
          <view class="item" v-for="i in 3" :key="i">
            <view class="tag">甜品</view>
            <view class="flex-row align-baseline">
              <view class="u-font-24">当前</view>
              <view class="u-font-32 u-m-l-16 u-m-r-32">0108</view>
              <view class="u-font-24" style="color: #F6AD3C;">还有12人</view>
            </view>
            <my-btn :size="[100, 50, 24]" color="#fff" bg="#5291D2" inline round>取消</my-btn>
          </view>
        </view>
      </view>
      
      <view class="card disabled gap-24" v-for="i in 2" :key="i">
        <view class="flex-row align-center">
          <u-avatar src="https://picsum.photos/id/912/200/200" size="110" mode="square"></u-avatar>
          <image class="u-m-l-12 u-m-r-12" src="../../static/icons/quhao-fenge.png" style="width: 12rpx;height: 120rpx;"
            mode="aspectFill"></image>
          <view class="flex-col" style="width: 500rpx;height: 120rpx;margin-left: auto;">
            <view class="u-font-28 u-line-1">仟吉KenGee(宝龙店)</view>
            <view class="u-font-24 u-line-2" style="color: #C4C4C4;margin: auto 0;">地址金水区商务内环九如路海逸名门23号楼1单元101</view>
          </view>
        </view>
      
        <view class="items u-p-t-24">
          <view class="item" v-for="i in 3" :key="i">
            <view class="tag">甜品</view>
            <view class="flex-row align-baseline">
              <view class="u-font-24">当前</view>
              <view class="u-font-32 u-m-l-16 u-m-r-32">0108</view>
              <view class="u-font-24" style="color: #F6AD3C;">还有12人</view>
            </view>
            <my-btn :size="[100, 50, 24]" color="#fff" bg="#5291D2" inline round>取消</my-btn>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {

      };
    }
  }
</script>

<style lang="scss">
  .card {
    width: 702rpx;
    padding: 24rpx;
    background: #fff;
    box-shadow: 6rpx 6rpx 16rpx 2rpx rgba(60, 69, 74, 0.1);
    border-radius: 20rpx;
    
    &.disabled {
      color: #C4C4C4 !important;
      filter: grayscale(1);
    }

    .item {
      padding: 12rpx 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .tag {
      height: 60rpx;
      background: #F6AD3C;
      border-radius: 30rpx;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0 24rpx;
    }
  }
</style>
